Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Form Validation
We can control form validation within the component object.
To do this, we assign a ref to our q-form
and then call the methods that are exposed:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-form
@submit="onSubmit"
@reset="onReset"
class="q-gutter-md"
ref="form"
>
<q-input
filled
v-model="name"
label="Your name *"
hint="Name"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
>
</q-input>
<q-input
filled
type="number"
v-model="age"
label="Your age *"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please type your age',
val => val > 0 && val < 130 || 'Please type a real age'
]"
>
</q-input>
<div>
<q-btn label="Submit" type="submit" color="primary"></q-btn>
<q-btn
label="Reset"
type="reset"
color="primary"
flat
class="q-ml-sm"
></q-btn>
</div>
</q-form>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
name: "",
age: ""
},
methods: {
async onSubmit() {
const sucess = await this.$refs.form.validate();
if (!success) {
return;
}
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "Submitted"
});
},
onReset() {
this.name = null;
this.age = null;
this.$refs.form.resetValidation();
}
}
});
</script>
</body>
</html>
We assign the form
ref to the q-form
component.
In the onSubmit
method, we use the ref by calling the validate
method to validate the form.
And then we call resetValidation
to reset validation in the onReset
method.
Form Field
We can use the q-field
component to create our own form field.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-field label="Standard" stack-label>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
Field content
</div>
</template>
</q-field>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We add the q-field
component and populate its control
slot to add the field with the placeholder being the content of the control
slot.
Form Field Color
We can set the color of form fields.
For example, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-field
color="lime-11"
bg-color="green"
filled
label="Label"
stack-label
>
<template v-slot:prepend>
<q-icon name="event"></q-icon>
</template>
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">
{{text}}
</div>
</template>
</q-field>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: "abc"
}
});
</script>
</body>
</html>
to add the bg-color
prop to change the background color of the form field.
Conclusion
We can add form validation and custom form fields into our Vue app with Quasar.